.check-box-warp {
  display: flex;
  background-color: #FFFFFF;
  cursor: pointer;
  input {
    display: none;
  }
  .container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 16px;
    height: 16px;
    border-radius: 3px;
    border: 1px solid #D9D9D9;
    transition: border .3s, background-color .3s;
    span.icon:before {
      font-weight: 700;
      color: #FFFFFF;
    }
    span.square {

      position: absolute;
      top: calc(50% - 4px);
      left: calc(50% - 4px);
      width: 8px;
      height: 8px;
      opacity: 0;
      background-color: #09AAFF;
      transition: opacity .3s;
    }
  }
  input:checked~.container {
    border-color: #09AAFF;
    background-color: #09AAFF;
  }
}